<template>
	<main-content
		:tableHeight.sync="tableHeight"
		:otherDependenComponents="otherDependenComponents"
	>
		<template slot="query">
			<el-form
				ref="form"
				:inline="true"
				:model="queryData"
				class="flex-warp-container"
			>
				<el-form-item
					:label="`${$t('common.belong_merchant')}:`"
					class="tagheight flex-row-container"
					label-width="77px"
				>
					<merchant-select
						v-model="queryData.merchantId"
						:merchantInfo.sync="merchantObj"
					></merchant-select>
				</el-form-item>
				<el-form-item
					:label="
						`${$t(
							'funds.proxy_member_funds_record.created_at_time'
						)}:`
					"
					class="flex-row-container"
					label-width="110px"
				>
					<el-date-picker
						v-model="createdAtTime"
						size="medium"
						:picker-options="pickerShortcut2"
						format="yyyy-MM-dd HH:mm:ss"
						type="datetimerange"
						range-separator="-"
						:start-placeholder="$t('common.start_date')"
						:end-placeholder="$t('common.end_date')"
						align="right"
						:clearable="false"
						:default-time="defaultTime"
					></el-date-picker>
				</el-form-item>
				<!-- <el-form-item
          :label="
            `${$t(
              'funds.proxy_member_funds_record.issue_time'
            )}:`
          "
          class="flex-row-container"
          label-width="77px"
        >
          <el-date-picker
            v-model="rebateAtTime"
            size="medium"
            :picker-options="pickerShortcut2"
            format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            :start-placeholder="$t('common.start_date')"
            :end-placeholder="$t('common.end_date')"
            align="right"
            :default-time="defaultTime"
          ></el-date-picker>
        </el-form-item> -->
				<el-form-item
					:label="`${$t('funds.order_no')}:`"
					class="flex-row-container"
					label-width="61px"
				>
					<el-input
						v-model="queryData.orderNo"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						v-input="{ name: 'num_alp' }"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="
						`${$t('funds.capital_adjustment.member_nickname')}:`
					"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.nickName"
						clearable
						:maxlength="12"
						v-input="{ name: 'symbols' }"
						:placeholder="$t('common.please_enter')"
						@input="nickNameRule($event)"
					></el-input>
				</el-form-item>
				<el-form-item
					:label="`${$t('funds.user_name')}:`"
					class="flex-row-container"
					label-width="77px"
				>
					<el-input
						v-model="queryData.userName"
						clearable
						size="medium"
						:placeholder="$t('common.please_enter')"
						:disabled="loading"
						v-input="{ name: 'num_alp' }"
						:maxlength="11"
						@keyup.enter.native="enterSearch"
					></el-input>
				</el-form-item>
				<!-- <el-form-item :label="`${$t('funds.vip_level')}:`">
          <el-input-number
            v-model="queryData.vipSerialNumMin"
            size="medium"
            :placeholder="$t('common.minimum')"
            :min="0"
            :max="10"
            :controls="false"
            style="width:100px"
            name="vipSerialNumMin"
            @blur="
              handleAmount(
                queryData,
                1,
                'vipSerialNumMin',
                'vipSerialNumMax',
                $t(
                  'funds.proxy_member_funds_record.form_search_tip1'
                )
              )
            "
          />
          -
          <el-input-number
            v-model="queryData.vipSerialNumMax"
            size="medium"
            :placeholder="$t('common.maximum')"
            :min="0"
            :max="10"
            :controls="false"
            style="width:100px"
            name="vipSerialNumMax"
            @blur="
              handleAmount(
                queryData,
                2,
                'vipSerialNumMin',
                'vipSerialNumMax',
                $t(
                  'funds.proxy_member_funds_record.form_search_tip2'
                )
              )
            "
          />
        </el-form-item> -->
				<el-form-item style="margin-left: 25px">
					<el-button
						type="primary"
						icon="el-icon-search"
						:disabled="loading"
						size="medium"
						@click="search"
					>
						{{ $t('common.search') }}
					</el-button>
					<el-button
						icon="el-icon-refresh-left"
						:disabled="loading"
						size="medium"
						@click="reset"
					>
						{{ $t('common.reset') }}
					</el-button>
					<el-button
						v-if="hasPermission('404051')"
						icon="el-icon-download"
						type="warning"
						:disabled="loading"
						size="medium"
						:loading="exportBtnLoading"
						@click="handleExportExcel"
					>
						{{ $t('common.export') }}
					</el-button>
				</el-form-item>
			</el-form>
		</template>
		<template slot="content">
			<div v-loading="loading">
				<el-table
					border
					size="mini"
					:data="tableData"
					style="width: 100%"
					class="small-size-table"
					:max-height="tableHeight"
					:header-cell-style="getRowClass"
					element-loading-spinner="el-icon-loading"
				>
					<el-table-column
						prop="id"
						align="center"
						min-width="180"
						:label="$t('funds.order_no')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.orderNo"
								:title="scope.row.orderNo"
								:copy="copy"
							>
								{{ scope.row.orderNo || '-' }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="userName"
						align="center"
						:label="$t('funds.user_name')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<Copy
								v-if="!!scope.row.userName"
								:title="scope.row.userName"
								:copy="copy"
							>
								{{ scope.row.userName }}
							</Copy>
							<span v-else>-</span>
						</template>
					</el-table-column>
					<el-table-column
						prop="nickName"
						align="center"
						:label="$t('funds.capital_adjustment.member_nickname')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.nickName || '-' }}
						</template>
					</el-table-column>
					<el-table-column
						prop="merchantName"
						align="center"
						:label="$t('common.belong_merchant')"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.merchantName || '-' }}
						</template>
					</el-table-column>
					<!-- <el-table-column
            prop="vipSerialNum"
            align="center"
            :label="$t('funds.vip_level')"
          >
            <template slot-scope="scope">
              VIP{{ scope.row.vipSerialNum }}
            </template>
          </el-table-column>
          <el-table-column
            prop="rebateStatus"
            align="center"
            :label="
              $t('funds.proxy_member_funds_record.draw_status')
            "
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{
                typeFilter(scope.row.rebateStatus, 'rebateType')
              }}
            </template>
          </el-table-column> -->
					<el-table-column
						prop="rebateAmount"
						align="center"
						min-width="180"
						:label="
							$t('funds.proxy_member_funds_record.rebate_amount')
						"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							<el-link
								type="primary"
								@click="dialogData(scope.row)"
							>
								{{ handleCurrency(scope.row.currency) }}
								{{
									handleNumber(
										scope.row.currency,
										scope.row.rebateAmount
									)
								}}
							</el-link>
						</template>
					</el-table-column>
					<!-- <el-table-column
            prop="payoutTime"
            align="center"
            :label="
              $t('funds.proxy_member_funds_record.issue_time')
            "
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.payoutTime || '-' }}
            </template>
          </el-table-column> -->
					<el-table-column
						prop="payoutTime"
						align="center"
						:label="
							$t(
								'funds.proxy_member_funds_record.created_at_time'
							)
						"
						show-overflow-tooltip
					>
						<template slot-scope="scope">
							{{ scope.row.payoutTime || '-' }}
						</template>
					</el-table-column>
				</el-table>
				<!-- 分页 -->
				<el-pagination
					:current-page.sync="pageNum"
					class="pageValue"
					background
					layout="total, sizes,prev, pager, next, jumper"
					:page-size="pageSize"
					:page-sizes="pageSizes"
					:total="total"
					:pager-count="9"
					@current-change="handleCurrentChange"
					@size-change="handleSizeChange"
				></el-pagination>
			</div>
		</template>
		<detail-page
			v-if="showDialog"
			:rowVal="rowVal"
			:closeDialog="
				() => {
					showDialog = false
				}
			"
		/>
	</main-content>
</template>

<script>
import list from '@/mixins/list'
import dayjs from 'dayjs'
import { routerNames } from '@/utils/consts'
import summaryList from './components/summaryList'
import MainContent from '@/components/MainContent/index.vue'

const startTime = () => {
	return dayjs()
		.startOf('day')
		.valueOf()
}
const endTime = () => {
	return dayjs()
		.endOf('day')
		.valueOf()
}

export default {
	name: routerNames.memberRebateRecord,
	components: {
		MainContent,
		DetailPage: () => import('./components/detail-page.vue')
	},
	mixins: [list, summaryList],
	data() {
		return {
			tableHeight: 480,
			otherDependenComponents: [],
			queryData: {},
			createdAtTime: [startTime(), endTime()],
			rebateAtTime: [startTime(), endTime()],
			tableData: [],
			subSummary: {},
			totalSummary: {},
			rowVal: {},
			showDialog: false,
			merchantObj: '',
			exportBtnLoading: false
		}
	},
	computed: {
		rebateType() {
			return this.globalDics.rebateType || []
		},
		appIdarr() {
			return this.globalDics.appId || []
		}
	},
	methods: {
		loadData() {
			this.loading = true
			const createdAt = this.createdAtTime || []
			// const rebateAt = this.rebateAtTime || []
			const params = {
				...this.queryData,
				// reportStartTime: dayjs(createdAt[0]).format('YYYYMMDD'),
				// reportEndTime: dayjs(createdAt[1]).format('YYYYMMDD'),
				payoutStartTime: createdAt[0]
					? dayjs(createdAt[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				payoutEndTime: createdAt[1]
					? dayjs(createdAt[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				...this.getParams()
			}
			this.pageCurrency = this.merchantObj?.currency || ''
			this.$api
				.getMemberRebateReportList(params)
				.then((res) => {
					const { record, summary, totalRecord } = res.data || {}
					this.tableData = record || []
					this.subSummary = summary || {}
					this.total = totalRecord || 0

					this.loading = false
				})
				.catch(() => {
					this.loading = false
				})
			// this.$api
			// 	.getMemberRebateReportSummary(params)
			// 	.then((res) => {
			// 		this.totalSummary = res.data || {}
			// 		this.loading = false
			// 	})
			// 	.catch(() => {
			// 		this.loading = false
			// 	})
		},
		// formatDate(time) {
		// 	if (!time) return '-'
		// 	const newTime = time.toString()
		// 	const year = newTime.substr(0, 4)
		// 	const month = newTime.substr(4, 2)
		// 	const date = newTime.substr(6, 2)
		// 	return year + '-' + month + '-' + date
		// },
		reset() {
			this.queryData = {}
			this.merchantObj = ''
			this.createdAtTime = [startTime(), endTime()]
			this.rebateAtTime = [startTime(), endTime()]
			this.pageNum = 1
			this.loadData()
		},
		reloadTime() {
			this.createdAtTime = [startTime(), endTime()]
			this.rebateAtTime = [startTime(), endTime()]
		},
		dialogData(val) {
			this.rowVal = {
				memberId: val.memberId,
				userId: val.userId,
				userName: val.userName,
				nickName: val.nickName,
				reportDate: val.reportDate,
				orderNo: val.orderNo
			}
			this.showDialog = true
		},
		handleExportExcel() {
			const createdAt = this.createdAtTime || []
			// const rebateAt = this.rebateAtTime || []
			const params = {
				...this.queryData,
				// reportStartTime: dayjs(createdAt[0]).format('YYYYMMDD'),
				// reportEndTime: dayjs(createdAt[1]).format('YYYYMMDD')
				payoutStartTime: createdAt[0]
					? dayjs(createdAt[0]).format('YYYY-MM-DD HH:mm:ss')
					: undefined,
				payoutEndTime: createdAt[1]
					? dayjs(createdAt[1]).format('YYYY-MM-DD HH:mm:ss')
					: undefined
			}
			this.exportBtnLoading = true
			this.exportExcelPublic({
				api: 'getMemberRebateReportExport',
				params
			}).finally(() => {
				this.exportBtnLoading = false
			})
		}
	}
}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
	color: #909399;
	font-weight: 700;
}

::v-deep .el-table__fixed-footer-wrapper .cell,
::v-deep .el-table__footer-wrapper .cell {
	height: 100%;
	padding: 0 !important;
	margin: 0 !important;

	> div {
		height: 100%;
	}
}

::v-deep .footer_count_row {
	min-height: 50px;
	height: 50%;
	display: flex;
	font-weight: 700;
	padding: 5px 0;
	align-items: center;
	flex-direction: column;
	justify-content: center;
}

::v-deep .footer_count_row_border {
	border-top: 1px solid #ebeef5;
}
</style>
